<template>
  <div class="course">
    <div class="title">课程页面</div>
    <div class="content">
      <div class="content_nav">
        <!-- <router-link
          replace
          :to="{ name: 'qianduan', params: { text: text } }"
          active-class="active"
          >前端</router-link
        > -->
        <button @click="toFront">前端</button>
        <router-link to="/course/back" active-class="active">后端</router-link>
      </div>
      <div class="content_con">
        <keep-alive include="Front">
          <router-view></router-view>
        </keep-alive>
      </div>
      <!-- <button @click="qianjin">前进</button>
      <button @click="houtui">后退</button>
      <button @click="qh">路由变化</button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "小滴课堂",
    };
  },
  methods: {
    toFront() {
      this.$router.push({ name: "qianduan", params: { text: this.text } });
    },
    qianjin() {
      this.$router.forward();
    },
    houtui() {
      this.$router.back();
    },
    qh() {
      this.$router.go(2);
    },
  },
};
</script>

<style lang="less" scoped>
.course {
  width: 200px;
  height: 200px;
  background-color: palevioletred;
  text-align: center;
  .content_nav {
    display: flex;
    justify-content: space-around;
    .active {
      color: red;
    }
  }
  .content_con {
    width: 140px;
    height: 100px;
    background-color: #fff;
    margin: 5px auto;
  }
}
</style>